<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input{
				width: 100px;
			}
			.hidden{
				display: none;
			}
		</style>
		<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
		<script type="text/javascript">
			var images=[];
			$(function(){
				
				$.ajax(
				{
					url:"data.json",
					type:"get",
					dataType:"json",
					async:false,
					success:function (data) {
						images = data;
						console.log(images);
					}
				})
				display()
			})
			function display(){
				$("tbody").html("")
				for (var i = 0; i < images.length; i++) {
					let tr=$("<tr></tr>")//行
					let td1= newTD(images[i].id);
					let td2= newTD(images[i].name);
					let td3= newTD(images[i].dynasty);
					let td4= newTD(images[i].author);
					tr.append(td1)
					tr.append(td2)
					tr.append(td3)
					tr.append(td4)
					let td = $("<td></td>")
					let btn1 = $("<button class='edit' onclick='edit()'>编辑</button>")
					let btn2 = $("<button class='del' onclick='del()'>删除</button>")
					let btn3 = $("<button class='save' onclick='save()'>保存</button>")
					let btn4 = $("<button class='cancel' onclick='cancel()'>取消</button>")
					td.append(btn1)
					td.append(btn2)
					td.append(btn3)
					td.append(btn4)
					tr.append(td)
					$("tbody").append(tr)
				}
				$("input").attr("disabled","disabled")
				$(".save").addClass("hidden")
				$(".cancel").addClass("hidden")//将其设置为不显示
				$(".add").removeClass("hidden")
			}
			function newTD(v){
				let td = $("<td></td>")
				let input=$("<input type='text'/>")
				input.attr("value",v)
				td.append(input)
				return td;
			}
			function add(){
				$(".add").addClass("hidden")
				let tr = $("<tr></tr>")
				let td1= newTD("")
				let td2= newTD("")
				let td3= newTD("")
				let td4= newTD("")
				tr.append(td1)
				tr.append(td2)
				tr.append(td3)
				tr.append(td4)
				let td =  $("<td></td>")
				let btn3 = $("<button class='save' onclick='save()'>保存</button>")
				let btn4 = $("<button class='cancel' onclick='cancel()'>取消</button>")
				td.append(btn3)
				td.append(btn4)
				tr.append(td)
				$("tbody").append(tr)
			}
			function cancel(){
				if(confirm("是否要取消保存？")){
					display();
				}
			}//是否取消增加的一排
			function save(){
				var index = $(".save").index(event.target)
				var t1 =$("tbody>tr:eq("+index+") input").eq(0).val()
				var t2 =$("tbody>tr:eq("+index+") input").eq(1).val()
				var t3 =$("tbody>tr:eq("+index+") input").eq(2).val()
				var t4 =$("tbody>tr:eq("+index+") input").eq(3).val()
				if(t1==""||t2==""||t3==""||t4=="")
				{
					alert("输入的数据不完整");
					return false;
				}else if(confirm("是否保存？")){
					let image = {}
					image.id = t1;
					image.name=t2
					image.dynasty=t3
					image.author=t4
					images[index]=image
					display()//重新刷新display
				}
			}
			function edit(){
				$(".add").addClass("hidden")
				var index = $(".edit").index(event.target)
				$(".edit").eq(index).addClass("hidden")
				$(".del").eq(index).addClass("hidden")
				$(".cancel").eq(index).removeClass("hidden")
				$(".save").eq(index).removeClass("hidden")
				$("tbody>tr:eq("+index+") input").removeAttr("disabled")
			}
			function del(){
				if(confirm("是否要删除数据？")){
					var index = $(".del").index(event.target)
					images.splice(index,1)
					display()
				}
			}
		</script>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>朝代</th>
					<th>作者</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<tr style="text-align: center;">
					<td colspan="5"><button type="button" class="add" onclick="add()" >增加</button></td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>
